<template>
  <div class="view-wrapper">
    <el-tabs v-model="activeName">
     
        <div class="tabs-body">
          <div class="detail" v-if="!midifyShow">
            <div class="text_ls">
              <div class="ls_left">店铺头像：</div>
              <div class="ls_right">
                <img
                  class="rig_img"
                  v-if="info.shopIcon"
                  :src="info.shopIcon"
                  alt=""
                  @click="handleFang(info.shopIcon)"
                />
              </div>
            </div>
            <div class="text_ls">
              <div class="ls_left" style="color: #1890ff">点击放大图片</div>
            </div>
            <div class="text_ls">
              <div class="ls_left">店铺名称：</div>
              <div class="ls_right">{{ info.shopName }}</div>
            </div>
            <div class="text_ls">
              <div class="ls_left">店铺定位：</div>
              <div class="ls_right">{{ info.locateAddress }}</div>
            </div>
            <div class="text_ls">
              <div class="ls_left">详细地址：</div>
              <div class="ls_right">{{ info.address }}</div>
            </div>
            <div class="text_ls">
              <div class="ls_left">营业时间：</div>
              <div class="ls_right">
                {{ info.startTime }} - {{ info.endTime }}
              </div>
            </div>
            <div class="text_ls">
              <div class="ls_left">每周营业日：</div>
              <div class="ls_right">{{ info.weekTime }}</div>
            </div>
            <div class="text_ls">
              <div class="ls_left">店铺类型：</div>
              <div class="ls_right">{{ info.shopTypeName }}</div>
            </div>
            <div class="text_ls">
              <div class="ls_left">所属区域：</div>
              <div class="ls_right">{{ info.provinceName + info.cityName + info.areaName }}</div>
            </div>
            <div class="text_ls">
              <div class="ls_left">店铺联系电话：</div>
              <div class="ls_right">{{ info.phone }}</div>
            </div>
            <div class="text_ls">
              <div class="ls_left">品牌介绍：</div>
              <div class="ls_right">{{ info.introduce }}</div>
            </div>
            <div class="text_ls">
              <div class="ls_left">用户端展示状态：</div>
              <div class="ls_right">{{ info.statusDict }}</div>
            </div>
            <div class="text_ls">
              <div class="ls_left">资质图片：</div>
              <div class="ls_right">
                <img
                  class="rig_img"
                  v-for="(item, idx) in competencyImgList"
                  :key="idx"
                  :src="item.url"
                  alt=""
                  @click="handleFang(item.url)"
                />
              </div>
            </div>
            <div class="text_ls">
              <div class="ls_left" style="color: #1890ff">点击放大图片</div>
            </div>
            <div class="text_ls">
              <div class="ls_left">店铺图片：</div>
              <div class="ls_right">
                <img
                  class="rig_img"
                  v-for="(item, idx) in photolist"
                  :key="idx"
                  :src="item.url"
                  alt=""
                  @click="handleFang(item.url)"
                />
              </div>
            </div>
            <div class="text_ls">
              <div class="ls_left" style="color: #1890ff">点击放大图片</div>
            </div>
            <div class="ls_bottom">
              <el-button
                type="primary"
                style="margin-right: 60px"
                @click="getmodify"
                >修改</el-button
              >
              <el-button @click="back">返回</el-button>
            </div>
          </div>

          <!-- 修改 -->
          <div class="modify" v-if="midifyShow">
            <el-form
              :inline="true"
              :rules="rules"
              :model="formInline"
              ref="ruleForm"
              class="demo-form-inline"
            >
              <el-form-item
                label="店铺头像："
                prop="image"
                label-width="150px"
              >
                <el-upload
                  class="avatar-uploader"
                  :action="action"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img
                    v-if="formInline.shopIcon"
                    :src="formInline.shopIcon"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <el-form-item
                label="店铺名称："
                prop="sort"
                label-width="150px"
              >
                <el-input
                  v-model="formInline.shopName"
                  placeholder="请输入店铺名称"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="店铺定位："
                prop="sort"
                label-width="150px"
              >
                <span class="fontsize">{{ formInline.locateAddress }}</span>
                <span
                  class="fontsize"
                  @click="modelMsg = true"
                  style="color: #1890ff; margin-left: 30px; cursor: pointer"
                  >重新定位地址</span
                >
              </el-form-item>
              <el-form-item
                label="详细地址："
                prop="sort"
                label-width="150px"
              >
                <el-input
                  v-model="formInline.address"
                  placeholder="请输入详细地址"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="营业时间："
                label-width="150px"
              >
                <div class="time_box">
                  <el-time-select
                    v-model="formInline.startTime" 
                    placeholder="开始时间"
                    :picker-options="{
                      start: '00:00',
                      step: '00:10',
                      end: '23:59',
                    }"
                  >
                  </el-time-select>
                  <span style="margin: 0 10px">-</span>
                  <el-time-select
                    v-model="formInline.endTime"
                    placeholder="结束时间"
                    :picker-options="{
                      start: '00:00',
                      step: '00:10',
                      end: '23:59',
                    }"
                  >
                  </el-time-select>
                </div>
              </el-form-item>
              <el-form-item label="每周营业日：" label-width="150px">
                <el-checkbox
                  :indeterminate="isIndeterminate"
                  v-model="checkAll"
                  @change="handleCheckAllChange"
                  >全选</el-checkbox
                >
                <div style="margin: 15px 0"></div>
                <el-checkbox-group
                  v-model="checkedCities"
                  @change="handleCheckedCitiesChange"
                >
                  <el-checkbox
                    v-for="city in cities"
                    :label="city"
                    :key="city"
                    >{{ city }}</el-checkbox
                  >
                </el-checkbox-group>
              </el-form-item>
              <el-form-item
                label="店铺类型："
                prop="sort"
                label-width="150px"
              >
                <el-cascader
                  v-model="avalue"
                  :options="typeLs"
                  :show-all-levels="false"
                  @change="handleChange"
                ></el-cascader>
              </el-form-item>
              <el-form-item
                label="所属区域："
                prop="sort"
                label-width="150px"
              >
                <el-cascader :options="regionOptions"  :props="{ value: 'id',label: 'label',children: 'children'}" v-model="regionAvalue" @change="regionChange"></el-cascader>
              </el-form-item>
              <el-form-item
                label="店铺联系电话："
                label-width="150px"
              >
                <el-input
                  v-model="formInline.phone"
                  placeholder="请输入店铺联系电话"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="用户端展示状态："
                prop="sort"
                label-width="150px"
              >
                <el-switch
                  v-model="formInline.status"
                  @change="handleSwitch(formInline.status)"
                  active-value="1"
                  inactive-value="2"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                >
                </el-switch>
              </el-form-item>
              <!-- <el-form-item
                label="店铺图片："
                prop="sort"
                label-width="150px"
              >
                <el-upload
                  :action="action"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :on-success="listAvatarSuccess"
                  :file-list="photolist"
                  :multiple="true"
                  :limit="10"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <div>({{ formInline.shopImgs.length }}/10)</div>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>
              </el-form-item> -->
              <el-form-item label="商家资质：" label-width="150px">
                <div class="img_list">
                  <div
                    class="img_box"
                    v-for="(item, index) in formInline.competencyImgList"
                    :key="index"
                  >
                    <div
                      class="closeimg el-icon-circle-close"
                      @click="detailcompetencyImg(index)"
                    ></div>
                    <img :src="item" alt="" />
                  </div>
                  <el-upload
                    v-if="formInline.competencyImgList.length < 6"
                    class="avatar-uploader2"
                    :action="action"
                    :show-file-list="false"
                    :on-success="competencyImgSuccess"
                    :before-upload="beforeAvatarUpload"
                    :multiple="true"
                    :limit="limit2"
                    :on-exceed="onExceed2"
                  >
                    <i class="el-icon-plus" style="font-size: 28px"></i>
                  </el-upload>
                </div>

                <div>({{ formInline.competencyImgList.length }}/6)</div>
              </el-form-item>
              <el-form-item
                label="店铺图片："
                label-width="150px"
              >
                <div class="img_list">
                  <div
                    class="img_box"
                    v-for="(item, index) in formInline.shopImgList"
                    :key="index"
                  >
                    <div
                      class="closeimg el-icon-circle-close"
                      @click="detailImg(index)"
                    ></div>
                    <img :src="item" alt="" />
                  </div>
                  <el-upload
                    v-if="formInline.shopImgList.length < 10"
                    class="avatar-uploader2"
                    :action="action"
                    :show-file-list="false"
                    :on-success="listAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    :multiple="true"
                    :limit="limit"
                    :on-exceed="onExceed"
                  >
                    <i class="el-icon-plus" style="font-size: 28px"></i>
                  </el-upload>
                </div>

                <div>({{ formInline.shopImgList.length }}/10)</div>
              </el-form-item>
              <el-form-item class="btn">
                <el-button style="margin-right: 30px" @click="cancel"
                  >取消</el-button
                >
                <el-button type="primary" @click="getSave">保存</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
    </el-tabs>
    <!-- <detail-dialog
      v-if="detailDialog"
      :id="id"
      :visible.sync="detailDialog"
      @success="_handleSuccess"
    /> -->
    <img-detail-dialog
      v-if="ImgDetailDialog"
      :id="id"
      :imgUrl="urlData"
      :visible.sync="ImgDetailDialog"
    />
    <el-dialog title="选择定位" :visible.sync="modelMsg">
      <div class="msgDiv">
        <el-autocomplete
          style="width: 80%; margin-right: 10px"
          class="inline-input"
          v-model="address"
          :fetch-suggestions="watchInput"
          placeholder="请输入内容"
          :trigger-on-focus="false"
          @select="handleSelect"
        ></el-autocomplete>
        <div id="container" style="margin-top: 20px"></div>
        <div class="dialog_bottom">
          <el-button style="margin-right: 60px" @click="modelMsg = false"
            >取消</el-button
          >
          <el-button type="primary" @click="determine">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import DetailDialog from "../components/DetailDialog";
import imgDetailDialog from "../components/imgDetailDialog";
import {
  getspuriousDetail,
  shopTypeTree,
  editSpurious,
  getCity
} from "@/api/clientManagement";
export default {
  name: "shopDetail",
  components: {
    DetailDialog,
    imgDetailDialog,
  },
  provide() {
    const { id } = this.$route.query;
    return {
      id: id,
    };
  },
  data() {
    var validateSort = (rule, value, callback) => {
      //   console.log("value", value);
      //   if (value === "") {
      //     callback(new Error("请输入排序号"));
      //   } else {
      //     if (value !== "") {
      //       var reg = /^[0-9]*$/;
      //       if (reg.test(value) === false) {
      //         callback(new Error("请输入数字"));
      //       }
      //     }
      //     callback();
      //   }
    };
    return {
      limit: 10, //上传数量限制
      limit2: 6,
      avalue: [],
      regionOptions:[],//城市数组
      regionAvalue:[],
      photolist: [],
      competencyImgList: [], //资质图片
      ImgDetailDialog: false,
      modelMsg: false, //显示模态框
      address: "", //输入的地址
      mapList: [], //用来存搜索到的所有地址
      mapVal: "", //创建的地图，赋值用
      midifyShow: false,
      detailDialog: false,
      activeName: "first",
      id: "",
      assetId: "",
      action: process.env.VUE_APP_BASE_API + "/common/v1/uploadFile",
      loading: false,
      merchantList: [],
      formInline: {
        shopIcon: "", //店铺头像
        shopName: "", //店铺名称
        shopType: "", //店铺类型
        // shopTypeName: "", //店铺类型名称
        shopLnt: "", //店铺经度
        shopLat: "", //店铺纬度
        address: "", //详细地址
        locateAddress: "", //定位地址
        status: "", //店铺状态 1 用户端展示  2 用户端不展示  字典：merchant_shop_spurious_status
        shopImgList: [], //店铺图片
        shopId: "",
        competencyImgList: [], //资质图片
        startTime: "", //开始时间
        endTime: "", //结束时间
        weekTime: "", //每周营业日
        phone: "", //店铺联系电话
        introduce: "", //品牌介绍
        province:'',//省
        city:'',//市
        area:'',//区
      },
      select: {
        merchantName: "",
        pageNum: 1,
        pageSize: 1000,
      },
      reportedStatusList: [
        { id: 1, value: "已备案" },
        { id: 2, value: "未备案" },
      ],
      rules: {
        sort: [{ required: true, validator: validateSort, trigger: "blur" }],
        image: [{ required: true, message: "请选择图片", trigger: "blur" }],
      },
      typeLs: [],
      value: true,
      dialogImageUrl: "",
      dialogVisible: false,
      searchinput: "",
      info: {},
      scList: [],
      detailList: [],
      checkAll: false,
      checkedCities: [],
      cities: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      isIndeterminate: false,
    };
  },
  watch: {
    //监听模态框是否显示,显示就执行初始化地图方法
    modelMsg(newVal, oldVal) {
      console.log(newVal);
      if (newVal == true) {
        this.initMap(this.formInline.shopLat, this.formInline.shopLnt);
      }
    },
  },
  created() {
    const { id } = this.$route.query;
    this.id = id;
    console.log(this.id);
    this.getTypels();
    this.getCity();
    this.getDetail();
  },
  mounted() {
    console.log("获取详情", this.id);
    let query = this.$route.query;
    console.log(query);
    if (query.activeName) {
      this.activeName = query.activeName;
    } else {
      this.activeName = "first";
    }
  },
  methods: {
    //返回
    back() {
      this.$router.go(-1);
    },
    //获取基本信息
    getDetail() {
      getspuriousDetail(this.id).then((res) => {
        console.log("获取详情", res);
        const { result } = res;
        this.info = result;
        this.formInline.shopIcon = result.shopIcon;
        this.formInline.shopName = result.shopName;
        this.formInline.locateAddress = result.locateAddress;
        this.formInline.shopType = result.shopType;
        this.formInline.startTime = result.startTime;
        this.formInline.endTime = result.endTime;
        this.formInline.phone = result.phone;
        this.formInline.introduce = result.introduce;
        this.formInline.weekTime = result.weekTime;
        // this.formInline.shopTypeName = result.shopTypeName;
        this.formInline.status = result.status;
        this.formInline.address = result.address;
        this.formInline.shopImgList = result.shopImgList;
        this.limit = 10 - result.shopImgList.length;
        this.formInline.competencyImgList = result.competencyImgList;
        this.limit = 6 - result.competencyImgList.length;
        this.formInline.shopLat = result.shopLat;
        this.formInline.shopLnt = result.shopLnt;
        this.address = result.locateAddress;
        // 处理店铺类型回显
        let value = [];
        value.push(result.shopTypeParent); 
        value.push(result.shopType);
        value.join(",");
        this.avalue = value;
        //处理所属区域回显
        let regionAvalue = [];
        regionAvalue.push(result.province);
        regionAvalue.push(result.city);
        regionAvalue.push(result.area);
        regionAvalue.join(",");
        console.log('regionAvalue',regionAvalue)
        this.regionAvalue = regionAvalue;
        this.formInline.province = result.province
        this.formInline.city = result.city
        this.formInline.area = result.area
        // 处理营业日期
        if(this.formInline.weekTime == '周一至周日'){
          this.checkAll = true
          this.checkedCities = this.cities
        }else{
          var singleTime = ''
          singleTime = this.formInline.weekTime.split('、')
          this.isIndeterminate = singleTime.length > 0 && singleTime.length < this.cities.length;
          singleTime = singleTime.map((item,index) => {
            if(singleTime.length > 1){
              if(index > 0){
                item = `周${item}`
              }
            }
            return item
          })
          this.checkedCities = singleTime
        }
        
        // result.shopImgs.forEach((item, ind) => {
        //   item = this.$IMG_URL + "/" + item;
        //   result.shopImgs[ind] = item;
        // });
      });
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cities : [];
      this.isIndeterminate = false;
      console.log(val);
      console.log(this.checkedCities);
      if (val == true) {
        this.formInline.weekTime = "周一至周日";
      } else {
        this.formInline.weekTime = "";
      }
      console.log(this.formInline.weekTime);
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
      console.log(this.checkedCities);
      let dataone = this.checkedCities.join("、");
      if (dataone == "") {
        this.formInline.weekTime = "";
      } else if (dataone == "周一、周二、周三、周四、周五、周六、周日") {
        this.formInline.weekTime = "周一至周日";
      } else {
        this.formInline.weekTime = dataone;
      }
      console.log(this.formInline.weekTime);
    },
    //放大图片
    handleFang(url) {
      this.urlData = url;
      this.ImgDetailDialog = true;
    },
    getmodify() {
      //点击修改
      this.midifyShow = true;
    },
    cancel() {
      //取消
      this.midifyShow = false;
      this.getDetail();
    },
    getSave() {
      //editSpurious 保存
      this.formInline.shopId = this.id;
      console.log(this.formInline);
      var params = {
        ...this.formInline,
      };
      editSpurious(params).then((res) => {
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 1500,
        });
        setTimeout(() => {
          this.getDetail();
          this.midifyShow = false;
        }, 1000);
      });
    },
    handleSelect(item) {
      console.log(item);
      this.initMap(item.location.lat, item.location.lng);
      this.formInline.shopLnt = item.location.lng;
      this.formInline.shopLat = item.location.lat;
    },
    determine() {
      console.log(this.address);
      this.formInline.locateAddress = this.address;
      this.modelMsg = false;
    },
    watchInput(queryString, cb) {
      console.log(queryString);
      const KEY = "IFRBZ-GZ2CQ-YHW5J-GSUGE-RC7VS-JBBWN";
      let url = "https://apis.map.qq.com/ws/place/v1/suggestion";
      let keyword = queryString; //传入的关键词
      this.$jsonp(url, {
        key: KEY,
        region: "全国",
        keyword: keyword,
        output: "jsonp",
      })
        .then((res) => {
          let opt = [];
          res.data.forEach((res) => {
            let opt1 = {
              value: res.title + "-" + res.address,
              location: res.location,
            };
            opt.push(opt1);
          });
          this.mapList = opt;
          console.log(this.mapList);
          // 调用 callback 返回建议列表的数据
          cb(this.mapList);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    initMap(lat, lng) {
      //如果地图存在，就销毁，下面会重新创建一个
      if (this.mapVal) {
        this.mapVal.destroy();
      }
      //定义地图中心点坐标
      //this.$nextTick是等Dom加载完再执行
      this.$nextTick(() => {
        var center = new window.TMap.LatLng(lat, lng);
        //定义map变量，调用 TMap.Map() 构造函数创建地图
        this.mapVal = new TMap.Map(document.getElementById("container"), {
          center: center, //设置地图中心点坐标
          zoom: 17.2, //设置地图缩放级别
          pitch: 43.5, //设置俯仰角
          rotation: 45, //设置地图旋转角度
          viewMode: "2D",
          mapStyleId: "style1", //个性化样式
        });
        //初始化marker
        var marker = new TMap.MultiMarker({
          id: "marker-layer", //图层id
          map: this.mapVal,
          styles: {
            //点标注的相关样式
            marker: new TMap.MarkerStyle({
              width: 25,
              height: 35,
              anchor: {
                x: 16,
                y: 32,
              },
              src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png",
            }),
          },
          geometries: [
            {
              //点标注数据数组
              id: "demo",
              styleId: "marker",
              position: new TMap.LatLng(lat, lng),
              properties: {
                title: "marker",
              },
            },
          ],
        });
      });
    },
    handleSwitch(e) {
      //开关
      console.log(e);
      this.formInline.status = e;
    },
    _handleSuccess() {
      //   this.getList();
      this.detailDialog = false;
    },
    getAudit(id) {
      this.id = id;
      this.detailDialog = true;
    },
    regionChange(value){ //城市区域选择
      this.formInline.province = value[0];
      this.formInline.city = value[1];
      this.formInline.area = value[2];
    },
    getCity() {//查询城市数据
    
      const params = {};
      getCity(params)
        .then((res) => {
          //   this.options = res.result;
          let ls = [];
          
          ls = this.getTreeData(res.result);
          console.log('省市区',ls)
          // let ls1 = ls.map((item) => {
          //   item.value = item.id;
          //   item.children.map((items) => {
          //     items.value = items.id;
          //     items.children.map((itemss) => {
          //       itemss.value = itemss.id;
          //     });
          //   });
          //   return item;
          // });
          this.regionOptions = ls;
          
        })
        .finally(() => {});
    },
    // 获取店铺类型
    getTypels() {
      //shopTypeTree
      this.loading = true;
      shopTypeTree()
        .then((res) => {
          let ls = [];
          console.log("res.result+++", res.result);
          ls = this.getTreeData(res.result);
          // console.log(this.typeLs)
          let ls1 = ls.map((item) => {
            item.value = item.id;
            item.children.map((items) => {
              items.value = items.id;
            });
            return item;
          });
          console.log("ls1+++", ls1);
          this.typeLs = ls1;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleChange(value) {
      let _this = this;
      console.log("value+++++++++++++", value[1], value);
      _this.formInline.shopType = value[1];
    },
    getTreeData(data) {
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          // data[i].children=undefined;
          delete data[i].children;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },
    handleAvatarSuccess(res, file) {
      //店铺头像
      this.formInline.shopIcon = res.result.url;
    },
    listAvatarSuccess(res, file, fileList) {
      //店铺图片上传
      this.formInline.shopImgList.push(res.result.url);
      console.log(this.formInline.shopImgList);
    },
    competencyImgSuccess(res, file, fileList) {
      //资质图片上传
      this.formInline.competencyImgList.push(res.result.url);
    },
    detailcompetencyImg(index) {
      this.formInline.competencyImgList.splice(index, 1);
      this.limit2 = 6 - this.formInline.competencyImgList.length;
    },
    onExceed(files, fileList) {
      this.$message.error("最多上传10张图片");
    },
    onExceed2(files, fileList) {
      this.$message.error("最多上传6张图片");
    },
    detailImg(index) {
      console.log(index);
      this.formInline.shopImgList.splice(index, 1);
      this.limit = 10 - this.formInline.shopImgList.length;
    },
    beforeAvatarUpload(file) {
      console.log(file);
      const format = ["image/jpeg", "image/jpg", "image/png"];
      const isJPG = format.some((item) => file.type === item);
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 jpeg,jpg,png格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleRemove(file, fileList) {
      //删除图片
      console.log(file.uid);
      console.log(fileList);
      console.log(this.photolist);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.merchantsId {
  color: #303133;
  font-size: 15px;
  margin-bottom: 16px;
}
.tabs-body {
  background-color: #fff;
  padding: 20px 0;
}
.text_ls {
  display: flex;
  align-items: center;
  min-height: 36px;
  line-height: 36px;
  margin: 5px 0;
}
.ls_left {
  font-size: 15px;
  color: #333333;
  width: 200px;
  text-align: right;
}
.ls_right {
  font-size: 15px;
  color: #333333;
  display: flex;
  align-items: center;
}
.ls_bottom {
  padding-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}
.avatar-uploader {
  border: 1px dashed #d9d9d9;
}
.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
.el-form-item {
  display: flex;
}
.el-input {
  width: 350px;
}
.btn {
  display: flex;
  justify-content: center;
}
.fontsize {
  font-size: 15px;
}
.modify {
  padding: 20px 55px;
}
.dialog_bottom {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.rig_img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 4px;
}
.avatar-uploader2 {
  width: 148px;
  height: 148px;
  text-align: center;
  line-height: 148px;
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  margin-bottom: 12px;
}
.closeimg {
  position: absolute;
  top: 0px;
  right: 0;
  z-index: 99;
  font-size: 28px;
  cursor: pointer;
  background: #4e4e4e;
}
.img_box {
  width: 148px;
  height: 148px;
  margin-right: 12px;
  margin-bottom: 12px;
  border-radius: 4px;
  position: relative;
}
.img_list {
  display: flex;
  align-items: center;
  flex: 1;
  flex-wrap: wrap;
}
.img_list img {
  border-radius: 4px;
  width: 100%;
  height: 100%;
}
.img_list::v-deep .avatar-uploader2 .el-upload {
  width: 100% !important;
}
</style>
